<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>西封主页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="row border-bottom white-bg dashboard-header">
        <div class="col-sm-3">
            <h2>欢迎入职</h2>
            <small>西封上届员工成功入职合影：</small>
            <br>
            <br>
            <img th:src="@{/img/hezhao.jpg}" width="100%" style="max-width:264px;">
            <br>
        </div>
        <div class="col-sm-5">
            <h2>西封杂志社主页管理</h2>
            <p>关于西封：具体成立年代不详，始于一本名为《南风游记》的残本，后于民国时期由疏南风创立「西安画报」，在召集成员后于1987年改为「西封杂志社」。</p>
            <p>你的工作：作为刚入职西封杂志社的成员，你的任务是在西封旗下论坛頭七中，根据社长让你调查的帖子间的联系进行整合，必要时需要实地探索，揭开帖子后隐藏的秘密。</p>
            <br>
            <p>
                <a class="btn btn-success btn-outline" href="https://gitee.com/liang-aoyu-11/magazine/" target="_blank">
                    <i class="fa fa-cloud"> </i> 访问码云
                </a>
                <a class="btn btn-white btn-bitbucket" target="_blank">
                    <i class="fa fa-home"></i> 前往论坛
                </a>
            </p>
        </div>
        <div class="col-sm-4">
            <h5>大家都在看：</h5>
			<style>
                /* 悬停效果 */
                li:hover {
                  background: rgba(112,147,219,0.1);
                  transform: translateX(5px);
                }
			</style>
			<span style="color: #7093DB;">
            <ol>
                <li>#资产负债欠车不还</li>
                <li>#青城传媒发家史，竟有不为人知的血腥背景</li>
                <li>#整个世界只有蘑菇先生一位心理医生</li>
                <li>#如何有效杀死亲哥</li>
                <li>#生活枯燥无味，贱猫殴打人类</li>
                <li>#梦，你的名字是梦</li>
				<li>#刘箐橙给未成年退款</li>
                <li>更多……</li>
            </ol>
			</span>
        </div>

    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>名人访谈录：</h5>
                    </div>
					<div class="ibox-content">
						<p>刘箐橙：<span style="color: #7093DB;"><u>从洗碗工到万众瞩目的大明星（第二版）</u></span></p>
						<p>白岭：<span style="color: #7093DB;"><span style="text-decoration: underline">蒙尘的明珠（第二版）</span></span></p>
						<p>疏南风：<span style="color: #7093DB;"><span style="text-decoration: underline">请多多支持《南风游记》（第三版）</span></span></p>
					</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>今日新贴</h5>
                    </div>
                    <div class="ibox-content no-padding">
                        <div class="panel-body">
                            <div class="panel-group" id="version">
								<div class="panel panel-default">
									<div class="panel-heading">
										<h5 class="panel-title">
											<a data-toggle="collapse" data-parent="#version" href="#v480">2025.4.28</a>
											<span class="pull-right" style="color:#ff6b6b;margin-left:10px;">  <!-- 新增样式 -->
											<i class="glyphicon glyphicon-bullhorn"></i> 7篇新帖  <!-- 新增图标 -->
      										</span>
										</h5>
									</div>
									<style>
										/* 列表项增强样式 */
                                        #v480 li {
                                          margin: 15px 0;  /* 核心间距 */
                                          padding: 8px 15px;  /* 增加内边距 */
                                          background: rgba(112,147,219,0.05);  /* 浅蓝色背景 */
                                          border-radius: 4px;
                                          transition: all 0.3s;  /* 悬停动效 */
                                        }

                                        /* 悬停效果 */
                                        #v480 li:hover {
                                          background: rgba(112,147,219,0.1);
                                          transform: translateX(5px);
                                        }
									</style>
									<div id="v480" class="panel-collapse collapse in">
										<div class="panel-body">
											<ol>
                                                <li>【讨论】你们那边有什么奇怪的神吗？</li>
                                                <li>【探灵】错位的脸</li>
                                                <li>【故事】窗边的人（末稿）</li>
                                                <li>【 ■ ■ 】我的姐姐死了</li>
                                                <li>【故事】今天给你们讲个关于先祖的事</li>
                                                <li>【求助】我的肚子好胀</li>
                                                <li>【故事】墙里的人</li>
											</ol>
										</div>
									</div>
								</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>我的任务</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="alert alert-warning">
							“我来到，我看见，我记录。”
                        </div>
						<style>
							/* 列表项增强样式 */
                              h4{
                              margin: 15px 0;  /* 核心间距 */
                              padding: 8px 15px;  /* 增加内边距 */
                              background: rgba(112,147,219,0.05);  /* 浅蓝色背景 */
                              border-radius: 4px;
                              transition: all 0.3s;  /* 悬停动效 */
                            }
							h4:hover {
                                          background: rgba(112,147,219,0.1);
                                          transform: translateX(5px);
                                        }
						</style>
                        <p id="pay-qrcode">
						<h4>【求助】我的表姐好奇怪<span style="color:#ff6b6b"> [进行中]</span></h4>
							<h4><span style="color: #C0C0C0;">【求助】住在我隔壁的一家三口有点...[已完成]</span></h4>
							<h4><span style="color: #C0C0C0;">【故事】你们小时候看过街边马戏吗？[已完成]</span></h4>
							<h4><span style="color: #C0C0C0;">【求助】神龛里的妹妹[已完成]</span></h4>
                        </p>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script type="text/javascript">
	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });
    </script>
</body>
</html>
